<template>
<!-- <div>
    <h1>这里是新闻</h1>
</div> -->
<div class="div-main">
    <ul>
        <li v-for="n in newsList" :key="n.id"> 
            <!-- 模板插值写法 -->
            <!-- <router-link :to="`/news/detail?id=${n.id}&title=${n.title}&subTitle=${n.subTitle}&content=${n.content}`">{{ n.title }}</router-link> -->
            <!-- query参数 -->
            <RouterLink :to="{
                    name:'xiang',
                    // path: '/news/detail',
                    // query:{
                    //     id: n.id,
                    //     title: n.title,
                    //     subTitle: n.subTitle,
                    //     content: n.content
                    // },
                    params:{
                        id: n.id,
                        title: n.title,
                        subTitle: n.subTitle,
                        content: n.content
                    }

                }" active-class="active">
                {{n.title}}
            </RouterLink>
        </li>
    </ul>
    <div class="news-content">
        <RouterView></RouterView>
    </div>
</div>

</template>
<script lang="ts" name="News" setup>
    import { reactive } from 'vue';
    //import { RouterLink,RouterView } from 'vue-router';

    const newsList = reactive([
        {id:'A001', title:'新闻1', subTitle:'新闻1副标题', content:'asl;kdjfl;kasjdfjasdkj1'},
        {id:'A002', title:'新闻2', subTitle:'新闻2副标题', content:'asl;kdjfl;kasjdfjasdkj2'},
        {id:'A003', title:'新闻3', subTitle:'新闻3副标题', content:'asl;kdjfl;kasjdfjasdkj3'},
        {id:'A004', title:'新闻4', subTitle:'新闻4副标题', content:'asl;kdjfl;kasjdfjasdkj4'},
        {id:'A005', title:'新闻5', subTitle:'新闻5副标题', content:'asl;kdjfl;kasjdfjasdkj5'},
        {id:'A006', title:'新闻6', subTitle:'新闻6副标题', content:'asl;kdjfl;kasjdfjasdkj6'}
    ])
</script>
<style scoped>
    .div-main {
       padding: 0 20px;
       display: flex;
      justify-content: space-between;
      height: 100%;
    }

    .div-main ul {
        margin-top: 30px;
        /* list-style: none; */
        padding-left: 10px;
    }
    .div-main li::marker {
        color: #64967E;
    }
    .div-main li>a {
        font-size: 18px;
        line-height: 40px;
        text-decoration: none;
        color: #64967E;
        text-shadow: 0 0 1px rgb(0, 84, 0);
    }
    .news-content {
        width: 70%;
        height: 90%;
        border: 1px solid;
        margin-top: 20px;
        border-radius: 10px;
    }

    .active {
        font-weight: bold;
        color: red;
    }

</style>